<template>
  <section class="container">
    <h3 class="tl mt15 ml5">
      <a
        class="navs"
        href="javascript:void(0)"
        v-for="nav in content.navs"
        :key="nav.name"
        @click="toPage(nav)"
      >
        {{ nav.title }}
        &nbsp;&nbsp;>&nbsp;&nbsp;
      </a>
      <a class="navs" href="javascript:void(0)">{{ titles }}</a>
    </h3>
    <component v-bind:is="componentName" :blog="blog"></component>
  </section>
</template>
<script>
import { defineComponent, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import DetailMd from "./detail-md";
// import DetailPdf from "./detail-pdf";
import { parse } from "qs";

export default defineComponent({
  name: "blog-detail",
  props: {
    blog: Object,
  },
  setup(props) {
    const route = useRoute();
    const router = useRouter();
    const blog = route.query;
    blog.title = route.params.title;
    const { title, id, type } = blog;
    const titles = ref(title);
    const componentName = ref("DetailMd");

    // componentName.value = type == "pdf" ? "DetailPdf" : "DetailMd";
    componentName.value = "DetailMd";
    const content = reactive({
      navs: null,
    });

    const toPage = (nav) => {
      router.push({ name: nav.name });
    };

    onMounted(() => {});

    return {
      blog,
      content,
      titles,
      toPage,
      componentName,
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.content.navs = [
        {
          name: "home",
          title: "博客首页",
          path: "/home",
        },
        { name: to.name, title: to.meta ? to.meta.title : "", path: to.path },
      ];
    });
  },
  components: {
    DetailMd,
    // DetailPdf,
  },
});
</script>

<style lang="scss" scoped>
a.navs {
  color: #1abc9c;
  font-weight: bolder;
}
</style>
